<script setup lang="ts">
import pkg from 'lodash'; 
const { chunk } = pkg;

// 获取nuxt配置信息
const config = useRuntimeConfig()

// 获取当前路由信息
const route = useRoute()

// 获取当前栏目id
let id = ref<number>()
id.value = route.params.id;

// 加载中
let loading = ref(false)

// 分页信息
interface dataPageData {
    size: number,
    page: number
}
const dataPage = ref<dataPageData>(
    {
        size: 10,
        page: 1
    }
)

// 数据
let artList = ref([])
let count = ref(1)

// 请求数据
loading.value = true;
const { data, pending, error, refresh } = await useFetch(config.public.baseURL + '/art/list', {
    method: 'GET',
    query: {
        // 我的待办事项数据
        id: id.value,
        size: dataPage.value.size,
        page: dataPage.value.page
    }
})
if (data.value.data.list.length > 0) {
    artList.value = chunk(data.value.data.list, 2)
    count.value = Math.ceil(data.value.data.total / dataPage.value.size)
}
loading.value = false;
// 去详情
const goDetail = (id) => {
    navigateTo(`/art/detail/${id}`)
}

const changePage = async (e) => {
    dataPage.value.page = e;
    loading.value = true;
    // 请求数据
    const { data, pending, error, refresh } = await useFetch(config.public.baseURL + '/art/list', {
        method: 'GET',
        query: {
            // 我的待办事项数据
            id: id.value,
            size: dataPage.value.size,
            page: dataPage.value.page
        }
    })
    artList.value = _.chunk(data.value.data.list, 2)
    count.value = Math.ceil(data.value.data.total / dataPage.value.size)
    loading.value = false;
}

</script>
<template>
    <div class="grid-box">
        <template v-if="artList.length > 0">
            <n-grid x-gap="12" :cols="2" v-for="(item, index) in artList" :key="index">
                <n-gi v-for="(sitem, sindex) in item" :key="sitem.id" @click="goDetail(sitem.id)">
                    <div class="gap-content">
                        <div class="left">
                            <n-image width="100" height="100" :src="sitem.url" />
                        </div>
                        <div class="right">
                            <div class="title">{{ sitem.name }}</div>
                            <div class="time">更新时间：{{ sitem.createtime }}</div>
                        </div>
                    </div>
                </n-gi>
            </n-grid>
            <n-space v-show="loading">
                <n-spin size="small" />
            </n-space>
        </template>
        <template v-else>
            <div class="result-box">
                <n-empty description="暂无数据" size="huge"></n-empty>
            </div>
        </template>
    </div>
    <template v-if="artList.length > 0">
        <div class="pagination-box">
            <n-pagination v-model:page="dataPage.page" :page-count="count" :on-update:page="changePage" />
        </div>
    </template>
</template>

<style lang="scss" scoped>
.grid-box {
    height: calc(100% - 60px);
    position: relative;

    .n-space {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
    }

    .n-grid {
        margin-bottom: 20px;

        .n-gi {
            cursor: pointer;
        }
    }


    .gap-content {
        background-color: #f1f1f1;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        position: relative;
        cursor: pointer;
        box-shadow: 0px 0px 20px 20px rgba(64, 158, 255, .5) inset;

        .left {
            display: flex;
        }

        .right {
            padding-left: 10px;
            position: relative;
            width: 100%;

            .title {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 限制行数为3 */
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .time {
                position: absolute;
                bottom: 0;
                color: #999;
            }
        }
    }

    .result-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.pagination-box {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    box-sizing: border-box;
}
</style>